<template>
  <div class="ele-body">
    <el-dialog
      title="任务成绩"
      :visible="visible"
      width="80%"
      :destroy-on-close="false"
      :lock-scroll="false"
      @update:visible="updateVisible"
      v-loading.fullscreen.lock="fullscreenLoading">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-position="right"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">

         <el-col :lg="5" :md="12">
           <el-form-item label="任务名称:">
             <el-select
               filterable
               clearable
               v-model="where.taskId"
               size="small"
               placeholder="-请选择任务-"
               class="ele-fluid">
               <el-option v-for="item in taskList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
         </el-col>

         <el-col :lg="5" :md="12">
           <el-form-item label="班级:">
             <el-select
               filterable
               clearable
               v-model="where.classId"
               size="small"
               placeholder="-请选择班级-"
               class="ele-fluid">
               <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
           </el-form-item>
         </el-col>

         <el-col :lg="5" :md="12">
           <el-form-item label="模式:">
             <el-select
               clearable
               v-model="where.model"
               placeholder="请选择模式"
               class="ele-fluid">
               <el-option label="测试模式" value="0"/>
               <el-option label="训练模式" value="1"/>
             </el-select>
           </el-form-item>
         </el-col>
        <el-col :lg="5" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
        <el-col :lg="4" :md="12">
          <el-button
            size="small"
            type="success"
            icon="el-icon-download"
            class="ele-btn-icon"
            @click="exportExcel">导出成绩
          </el-button>
        </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <!-- <el-button
            size="small"
            type="success"
            icon="el-icon-download"
            class="ele-btn-icon"
            @click="exportExcel">导出运动数据
          </el-button> -->
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link v-if="row.videoUrlList"
                   type="primary"
                   :underline="false"
                   icon="el-icon-video-camera"
                   @click="openVideo(row)">视频
          </el-link>
        </template>
        <!-- 头像列 -->
        <template slot="avatar" slot-scope="{row}">
          <el-avatar shape="square" :size="25" :src="row.avatar"/>
        </template>

        <!-- 类型列 -->
        <template slot="mode" slot-scope="{row}">
          <el-tag v-if="row.type === 1" type="" size="small">测试模式</el-tag>
          <el-tag v-if="row.type === 2" type="success" size="small">训练模式</el-tag>
          <el-tag v-if="row.type === 3" type="warning" size="small">体育赛事</el-tag>
        </template>

        <!-- 性别列 -->
        <template slot="gender" slot-scope="{row}">
          <el-tag v-if="row.gender === 1" type="" size="small">男</el-tag>
          <el-tag v-if="row.gender === 2" type="success" size="small">女</el-tag>
          <el-tag v-if="row.gender === 3" type="warning" size="small">未知</el-tag>
        </template>

        <!-- 评定列 评级：0不及格 1优秀 2良好 3及格-->
        <template slot="rating" slot-scope="{row}">
          <el-tag v-if="row.rating === 0" type="" size="small">不及格</el-tag>
          <el-tag v-if="row.rating === 1" type="" size="small">优秀</el-tag>
          <el-tag v-if="row.rating === 2" type="success" size="small">良好</el-tag>
          <el-tag v-if="row.rating === 3" type="warning" size="small">及格</el-tag>
        </template>

      </ele-pro-table>
    </el-card>
    </el-dialog>
    <!-- 体测视频弹窗 -->
    <div v-if="showVideoModal">
      <video-modal :visible.sync="showVideoModal" title="体测视频" :video-url="current.videoUrlList"/>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import VideoModal from './video-modal';
import {download} from "@/utils/download";

export default {
  name: 'ExamTiyutestRecord',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {VideoModal},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/taskscorerecord/index',
      // 表格列配置
      columns: [
        {
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'paim',
          label: '班级名次/班级人数',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'project',
          label: '项目',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'task',
          label: '任务名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'testerName',
          label: '姓名',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'testerNumber',
          label: '学籍号',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'gender',
          label: '性别',
          showOverflowTooltip: true,
          minWidth: 60,
          align: 'center',
          slot: 'gender',
        },
        {
          prop: 'score',
          label: '运动成绩',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'duration',
          label: '运动耗时',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'bmi',
          label: 'BMI',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'pingscore',
          label: '评分',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'ratingStr',
          label: '评定',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'createdDate',
          label: '运动时间',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示视频弹窗
      showVideoModal: false,
      // 学年列表
      annualList: [],
      // 项目列表
      projectList: [],
      // 年级列表
      gradeList: [],
      // 院系列表
      departmentsList: [],
      // 专业列表
      professionalList: [],
      // 班级列表
      classList: [],
      // 任务列表
      taskList: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.where = {taskId:this.data.id};
        // console.log(this.data);
        this.form = Object.assign({}, this.data);
        this.reload();
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  mounted() {
    // 学年列表
    this.getAnnualList();
    // 获取项目列表
    this.getProjectList();
    // 获取年级列表
    this.getGradeList();
    // 获取院系列表
    this.getDepartmentsList();
    // 获取专业列表
    this.getProfessionalList();
    // 获取班级列表
    this.getClassList();
    // 获取任务列表
    this.getTaskList();
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {taskId:this.data.id};
      this.reload();
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 查看视频 */
    openVideo(row) {
      this.current = row;
      this.showVideoModal = true;
    },
    /* 导出数据Excel */
    exportExcel() {
      download('/taskscorerecord/exportExcel', this.where)
      // let info = Object.assign({},this.where);
      // console.log(info)
      // this.$http
      //   .post("/taskscorerecord/exportExcel", info)
      //   .then((res) => {
      //     let data = res.data;
      //     if (data.code == 0) {
      //       // 下载文件
      //       window.location.href = data.data;
      //       this.$message({
      //         type: "success",
      //         message: "导出成功",
      //       });
      //     } else {
      //       this.$message.error("导出失败");
      //     }
      //   })
    },
    /**
     * 获取学年列表
     */
    getAnnualList() {
      this.$http.post('/annual/getAnnualList').then(res => {
        if (res.data.code === 0) {
          this.annualList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取项目列表
     */
    getProjectList() {
      this.$http.post('/project/getProjectsList').then(res => {
        if (res.data.code === 0) {
          this.projectList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
      this.$http.post('/grade/getGradesList').then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      if(this.where.yxtype){
        delete this.where.departmentsId
        delete this.where.professionalId
        delete this.where.classId
        // this.where.departmentsId = '';
        // this.where.professionalId = '';
        // this.where.classId = '';
        // this.$forceUpdate();
      }
      this.$http.post('/departments/getDepartmentsList', {type: this.where.yxtype}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });

      this.getProfessionalList();
    },
    /**
     * 获取专业列表
     */
    getProfessionalList() {
      this.$http.post('/professional/getProfessionalsList',{type: this.where.yxtype}).then(res => {
        if (res.data.code === 0) {
          this.professionalList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取班级列表
     */
    getClassList() {
      this.$http.post('/clss/getClazzList').then(res => {
        if (res.data.code === 0) {
          this.classList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取任务列表
     */
    getTaskList() {
      this.$http.post('/task/getTaskList').then(res => {
        if (res.data.code === 0) {
          this.taskList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
</style>
